<template>
  <div class="goodsinfo-container">


    <transition
    @before-enter='beforeEnter'
    @enter='Enter'
    @after-enter='afterEnter'>
      <div class="ball" v-show="ballFlag"></div>
    </transition>
    
    


    <!-- 商品轮播图区域 -->
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <swiper :swipeList="swipeList" :isfull="false"></swiper>
        </div>
      </div>
    </div>
    <!-- 商品购买区域 -->
    <div class="mui-card">
      <div class="mui-card-header">{{detail.title}}</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p class="price">
            市场价：
            <span>¥{{detail.market_price}}</span>
            &nbsp;&nbsp;&nbsp;
            销售价：
            <span>¥{{detail.sell_price}}</span>
          </p>
          <p>
            购买数量：
            <numbox @getCount='getSelectCount' :max='detail.stock_quantity'></numbox>
          </p>
          <p>
            <mt-button type="primary" size="small">立即购买</mt-button>
            <mt-button type="danger" size="small" @click='addShop' >加入购物车</mt-button>
            <!-- 如何实现加入购物车的时候 拿到选择的数量 -->
            <!-- 按钮属于goodsinfo页面 数组属于numberbox组件 -->
            <!-- 由于涉及父子组件签到，无法直接字goodsinfo页面中获取到 选中的商品的数量值 -->
            <!-- 子组件向父组件传值 -->
            <!-- 事件调用的本质，父向子传递方法，子调用方法，同时把数据作为参数传递过去 -->
          </p>
        </div>
      </div>
    </div>
    <!-- 商品参数区域 -->
    <div class="mui-card">
      <div class="mui-card-header">商品参数</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>商品货号：{{detail.goods_no}}</p>
          <p>库存情况：{{detail.stock_quantity}}件</p>
          <p>上架时间：{{detail.add_time | dataFormat('YYYY-MM-DD HH:mm:ss')}}</p>
        </div>
      </div>
      <div class="mui-card-footer">
        <mt-button type="primary" size="large" plain @click='goDetail(id)'>图文介绍</mt-button>
        <mt-button type="danger" size="large" plain @click='goComments(id)'>商品评论</mt-button>
      </div>
    </div>
  </div>

  <!-- 为什么轮播图图片出问题 -->
  <!-- 1.首页中的图片 宽高为100% -->
  <!-- 2.在商品详情页，轮播图的图片也使用100%，会出问题 -->
  <!-- 3.商品详情页中的轮播图 期望 高度100% 宽度自适应 -->
  <!-- 4.动态添加类名  {full: isfull} isfull 设置为布尔值，由父组件在标签中传递此值 轮播图组件在 props中接收 -->
</template>

<script>
import swiper from "../subcomponents/swiper.vue";
import numbox from "../subcomponents/goodsinfo_number.vue";
export default {
  data() {
    return {
      id: this.$route.params.id,
      swipeList: [],
      detail: [],
      ballFlag: false, // 控制小球隐藏和显示
      count:1,
    };
  },

  methods: {
    getPhotoList() {
      this.$http.get("api/getthumimages/" + this.id).then(res => {
        if (res.body.status === 0) {
          this.swipeList = res.body.message;
          // 数据处理
          this.swipeList.forEach(item => {
            item.img = item.src;
          });
        }
      });
    },
    getDate() {
      this.$http.get("api/goods/getinfo/" + this.id).then(res => {
        if (res.body.status === 0) {
          this.detail = res.body.message[0];
        }
      });
    },
    goDetail(id){
      this.$router.push({ name:'goodsdetail', params: {id}})
    },
    goComments(id){
      this.$router.push({ name:'goodscomments', params: {id}})
    },
    addShop(){
      // 点击加入购物车 显示小球
      this.ballFlag = !this.ballFlag;
      // 拼接处一个 要保存到 store中 car数组里的 商品信息
      var info = {
        id:this.id,
        count: this.count,
        price: this.detail.sell_price,
        selected: true,
        inventory:this.detail.stock_quantity
      };
      // 调用 store 中 mutations 中的方法来吧 信息 添加到 store 中
      this.$store.commit('addToCar',info)
    },
    // 进入前样式
    beforeEnter(el) {
      el.style.transform = 'translate(0, 0)'; 
      // console.log('beforeEnter')
      // console.log(el.offsetWidth)
    },
    // 进入时的样式
    Enter(el,done){
      
      el.offsetHeight;
      el.style.transform = 'translate(93px, 230px)'
      el.style.transition = 'all 1s ease';
      // console.log('Enter')
      
      done()  // 代表 afterEnter的引用
    },
    afterEnter(el){
      
      // 动画结束隐藏小球
      this.ballFlag = !this.ballFlag
      // console.log('afterEnter')

    },
    getSelectCount(c) {
      // 当子组件 把选中的数量传递给父组件的时候，把选中的值保存到data上
      this.count = c;
      // console.log(this.count);
    }
  },

  created() {
    this.getPhotoList();
    this.getDate();
  },
  components: {
    swiper: swiper,
    numbox
  }
};
</script>

<style lang='less' scoped>
.goodsinfo-container {
  background-color: #eee;
  overflow: hidden;
  .mui-card-content-inner {
    p {
      color: #000;
    }
    .price {
      span:first-of-type {
        font-size: 13px;
        text-decoration: line-through;
      }
      span:last-of-type {
        font-size: 16px;
        color: red;
      }
    }
  }
  .mui-card-footer {
    display: block;
    button {
      margin: 15px 0;
    }
  }
}
.ball {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
  z-index: 99;
  left: 150px;
  top: 390px;
}

// .v-enter-to,
// .v-leave {
//   opacity: 0;
//   transform: translate(238px,620px)
// }

// .v-enter-active,
// .v-leave-active {
//   transition: all 1s ease;
// }
</style>
